<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>欢迎您登录趣订水</title>
        <link rel="stylesheet" type="text/css" href="/admin/css/login.css" media="all">
       	<link rel="stylesheet" type="text/css" href="/admin/css/{{$config['COLOR_STYLE']}}.css" media="all">
    </head>
    <body id="login-page">
        <div id="main-content">

            <!-- 主体 -->
            <div class="login-body">
                <div class="login-main pr">

                    <form action="{{urlAccount('login','postIndex')}}" method="post" class="login-form">
                        <h3 class="welcome"><i class="login-logo"></i>趣订水管理平台</h3>
                        <div class="head_tab" style="height: 3rem;width: 100%">
                            <span class="tab tab_active tab_left" style="float: left;">水站</span>
                            <span class="tab tab_right" style="float: right">服务商</span>
                        </div>
                        <div id="itemBox" class="item-box">
                            <div class="item">
                                <i class="icon-login-user"></i>
                                <input type="text" id="username" name="username" placeholder="请填写用户名" autocomplete="off" />
                            </div>
                            <span class="placeholder_copy placeholder_un">请填写用户名</span>
                            <div class="item b0">
                                <i class="icon-login-pwd"></i>
                                <input type="password" id="password" name="password" placeholder="请填写密码" autocomplete="off" />
                            </div>
                            <span class="placeholder_copy placeholder_pwd">请填写密码</span>
                            <div class="item verifycode">
                                <i class="icon-login-verifycode"></i>
                                <input type="text" name="verify" placeholder="请填写验证码" autocomplete="off">
                                <a class="reloadverify" title="换一张" href="javascript:void(0)">换一张？</a>
                            </div>
                            <span class="placeholder_copy placeholder_check">请填写验证码</span>
                            <div>
                                <img class="verifyimg reloadverify" alt="点击切换" src="{{url('captcha')}}">
                            </div>
                            <span><input type="checkbox" id="remember" value="1" style="float: left;width: 20px;!important;">&nbsp;&nbsp;&nbsp;记住密码</span>
                        </div>
                        <div class="login_btn_panel">
                            <button class="login-btn" type="submit">
                                <span class="in"><i class="icon-loading"></i>登 录 中 ...</span>
                                <span class="on">登 录</span>
                            </button>
                            <div class="check-tips"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
	<!--[if lt IE 9]>
    <script type="text/javascript" src="/static/jquery-1.10.2.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script type="text/javascript" src="/static/jquery-2.0.3.min.js"></script>
    <!--<![endif]-->
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var key = 'login';
        var local_data = getCache(key);
        if (local_data && local_data != undefined) {
            $("#username").attr('value', local_data.username);
            $("#password").attr('value', local_data.password);
            $("#remember").prop('checked', true);

        }
        /* 登陆表单获取焦点变色 */
    	$(".login-form").on("focus", "input", function(){
            $(this).closest('.item').addClass('focus');
        }).on("blur","input",function(){
            $(this).closest('.item').removeClass('focus');
        });

    	//表单提交
    	$(document)
	    	.ajaxStart(function(){
	    		$("button:submit").addClass("log-in").attr("disabled", true);
	    	})
	    	.ajaxStop(function(){
	    		$("button:submit").removeClass("log-in").attr("disabled", false);
	    	});

    	$("form").submit(function(){
    		var self = $(this);
    		console.log(self.attr("action"));
    		$.post(self.attr("action"), self.serialize(), success, "json");
    		return false;

    		function success(data){
    			if(data.status){
                    var local_data = {username: $("#username").val(), 'password': $("#password").val()};
                    if ($("#remember").prop('checked')) {
                        setCache(key, local_data);
                    } else {
                        deleteCache(key);
                    }
                    window.location.href = data.url;
    			} else {
    				self.find(".check-tips").text(data.info);
    				//刷新验证码
    				$(".reloadverify").click();
    			}
    		}
    	});

		$(function(){
			//初始化选中用户名输入框
			$("#itemBox").find("input[name=username]").focus();
			//刷新验证码
			var verifyimg = $(".verifyimg").attr("src");
            $(".reloadverify").click(function(){
                if( verifyimg.indexOf('?')>0){
                    $(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
                }else{
                    $(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
                }
            });

            //placeholder兼容性
                //如果支持 
            function isPlaceholer(){
                var input = document.createElement('input');
                return "placeholder" in input;
            }
                //如果不支持
            if(!isPlaceholer()){
                $(".placeholder_copy").css({
                    display:'block'
                })
                $("#itemBox input").keydown(function(){
                    $(this).parents(".item").next(".placeholder_copy").css({
                        display:'none'
                    })                    
                })
                $("#itemBox input").blur(function(){
                    if($(this).val()==""){
                        $(this).parents(".item").next(".placeholder_copy").css({
                            display:'block'
                        })                      
                    }
                })
                
                
            }
		});
		
		$('.tab_left').bind('click',function () {
            $('.tab_left').addClass('tab_active');
            $('.tab_right').removeClass('tab_active');
            var url = "{{urlAccount('login','postIndex')}}";
            $(".login-form").attr('action',url);
        })

        $('.tab_right').bind('click',function () {
            $('.tab_right').addClass('tab_active');
            $('.tab_left').removeClass('tab_active');
            var url = "{{urlAdmin('login','postIndex')}}";
            $(".login-form").attr('action',url);
        })

        function setCache(key, loca_data) {
            if (!window.localStorage) {
                $.alert('浏览器不支持localstorage');
            } else {
                var storage = window.localStorage;
                storage.setItem(key, JSON.stringify(loca_data));
            }
        }

        //获取缓存
        function getCache(key) {
            if (!window.localStorage) {
                $.alert('浏览器不支持localstorage');
            } else {
                var storage = window.localStorage;
                return JSON.parse(storage.getItem(key));
            }
        }

        //删除缓存
        function deleteCache(key) {
            if (!window.localStorage) {
                $.alert('浏览器不支持localstorage');
            } else {
                var storage = window.localStorage;
                storage.removeItem(key);
            }
        }
    </script>
</body>
</html>
